---
function slotDefault(slotName: string) {
	return `❌ Missing <Fragment slot="${slotName}">...</Fragment>`;
}
---

<div class="diagram not-content">
	<div class="header app"><slot name="headerApp">{slotDefault('headerApp')}</slot></div>
	<div class="sidebar"><slot name="sidebarApp">{slotDefault('sidebarApp')}</slot></div>
	<div class="main"><slot name="main">{slotDefault('main')}</slot></div>
	<div class="carousel app"><slot name="carouselApp">{slotDefault('carouselApp')}</slot></div>
	<div class="footer"><slot name="footer">{slotDefault('footer')}</slot></div>
</div>

<p class="credit"><slot name="source">{slotDefault('source')}</slot></p>

<style>
	.diagram {
		display: grid;
		grid-template-areas:
			'header header header'
			'sidebar main main'
			'sidebar carousel carousel'
			'footer footer footer';
		grid-gap: 0.75rem;
		padding: 0.75rem;
		overflow-x: auto;
	}
	.diagram > * {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 2rem;
		background: var(--sl-color-gray-6);
		border: 2px solid var(--sl-color-gray-5);
		color: var(--sl-color-gray-2);
	}
	.diagram .app {
		font-size: 1.05rem;
	}
	.diagram .header {
		grid-area: header;
		background: hsla(100, 60%, 50%, 0.2);
		border-color: hsla(100, 30%, 35%, 0.8);
		color: var(--sl-color-gray-1);
	}
	.diagram .sidebar {
		grid-area: sidebar;
	}
	.diagram .main {
		grid-area: main;
		height: 320px;
	}
	.diagram .carousel {
		grid-area: carousel;
		background: hsla(320, 80%, 50%, 0.2);
		border-color: hsla(320, 30%, 35%, 0.8);
		color: var(--sl-color-gray-1);
	}
	.diagram .adv {
		grid-area: adv;
	}
	.diagram .footer {
		grid-area: footer;
	}

	/* Dark mode support */
	:root.theme-dark .app {
		color: rgba(255, 255, 255, 0.9);
	}
	:root.theme-dark .diagram *:not(.app) {
		background: hsla(0, 0%, 60%, 0.08);
		border-color: hsla(0, 0%, 80%, 0.15);
		color: rgba(255, 255, 255, 0.75);
	}

	.credit {
		text-align: right;
		font-size: var(--sl-text-xs);
	}
</style>
